<template>
  <div class="app-container setting">
    <div class="head-container">
      <public-header />
    </div>
    <div class="setting-header">
      <span>提示：最多可选择5个导航</span>
    </div>
    <div class="setting-container">
      <div
        class="setting-content-info"
        v-for="(item, index) in data"
        :key="index"
      >
        <div class="icon" @click="selectClick(item.id)">
          <img
            src="../../../public/images/setting/weixuan.png"
            v-if="!item.iconSelected"
            alt=""
          />
          <img
            src="../../../public/images/setting/xuanzhong.png"
            v-if="item.iconSelected"
            alt=""
          />
        </div>
        <img :src="item.imgs" alt="" />
        <p>{{ item.text }}</p>
      </div>

      <div class="setting-content-info addBox">
        <div class="add" @click="dialogFormVisible = true">
          <img src="../../../public/images/setting/fabu.png" alt="" />
        </div>
        <p>添加导航</p>
      </div>
    </div>

    <div class="setting-button">
      <el-button type="primary" @click="onSubmit">完成</el-button>
    </div>

    <el-dialog title="添加导航" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="导航类型" :label-width="formLabelWidth">
          <el-select v-model="form.region" placeholder="请选择导航类型">
            <el-option label="新闻" value="xinwen"></el-option>
            <el-option label="财经" value="caijing"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="导航名称" :label-width="formLabelWidth">
          <el-input v-model="form.name" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="网址" :label-width="formLabelWidth">
          <el-input v-model="form.website" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="cancel()">取 消</el-button>
        <el-button type="primary" @click="determine()">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import imgs from "../../../public/images/newsInfomation/30@2x.png";
// import { postLoginByUserNamePassWord } from "../../api/user/userLog";
export default {
  name: "Home",
  data() {
    return {
      data: [
        { id: 1, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 2, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 3, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 4, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 5, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 6, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 7, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 8, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 9, imgs: imgs, text: "腾讯网", iconSelected: false },
        { id: 10, imgs: imgs, text: "腾讯网", iconSelected: false },
      ],
      selectedData: [],
      dialogFormVisible: false,
      form: {
        name: "",
        region: "",
        website: "",
      },
      formLabelWidth: "120px",
    };
  },
  components: {
    PublicHeader: () => import("../../components/PublicHeader"),
  },
  watch: {
    // selectedData:{
    //   handler(newVal){
    //     if(newVal.length > 5){
    //       newVal = newVal.slice(0,5)
    //       console.log({newVal});
    //     }
    //   },
    //   deep:true
    // }
  },
  mounted() {},
  methods: {
    selectClick(id) {
      let selectArray = this.data;
      selectArray.map((el) => {
        if (el.id == id) {
          el.iconSelected = !el.iconSelected;
        }
      });
      let _selectedData = [];
      selectArray.forEach((el) => {
        if (el.iconSelected) {
          _selectedData.push(el);
        }
      });
      if (_selectedData.length > 5) {
        selectArray.map((el) => {
          if (el.id == id) {
            el.iconSelected = false;
            this.$message({
              message: "最多选择5个导航",
              type: "warning",
            });
          }
        });
      }
      let selectedData = [];
      this.data.forEach((el) => {
        if (el.iconSelected) {
          selectedData.push(el);
        }
      });
      this.selectedData = selectedData;
    },
    onSubmit() {
      // let submitData = [];
      // submitData = this.selectedData;
      // console.log(submitData);
      // postLoginByUserNamePassWord({
      //   userName: "hahaha",
      //   password: "123123",
      // }).then((res) => {
      //   console.log(res);
      // });
    },
    determine() {
      if (
        this.form.name == "" &&
        this.form.region == "" &&
        this.form.website == ""
      ) {
        this.$alert("请输入以上全部信息！");
        return;
      }
      this.dialogFormVisible = false;
    },
    cancel() {
      this.dialogFormVisible = false;
      this.form = {};
    },
  },
};
</script>

<style lang="less">
.setting {
  padding: 20px 0;
  .el-dialog {
    width: 30%;
  }
}
.app-container {
  display: flex;
  flex-flow: column;
  .setting-header {
    display: flex;
    background: rgba(254, 118, 44, 0.3);
    border-radius: 5px;
    width: 370px;
    height: 40px;
    font-size: 17px;
    color: #fe762c;
    line-height: 40px;
    padding-left: 20px;
    margin: 30px 20px;
    box-sizing: border-box;
  }
  .setting-container {
    width: 100%;
    min-height: 500px;
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;
    .setting-content-info {
      width: 150px;
      height: 182px;
      text-align: center;
      background-color: #f1f1f1;
      border-radius: 5px;
      font-size: 18px;
      margin-left: 18px;
      margin-bottom: 50px;
      position: relative;
      img {
        width: 88px;
        height: 88px;
        margin-top: 42px;
      }
      .icon {
        width: 20px;
        height: 20px;
        position: absolute;
        top: 10px;
        right: 10px;
        img {
          width: 18px;
          height: 18px;
          margin: 0;
        }
      }
      p {
        margin-top: 10px;
        color: #333333;
      }
    }
    .addBox {
      background-color: white;
      text-align: center;
      .add {
        margin: 0 auto;
        margin-top: 40px;
        width: 88px;
        height: 88px;
        background-color: #f1f1f1;
        img {
          width: 30px;
          height: 30px;
          margin: 30px auto;
        }
      }
      p {
        padding-top: 8px;
      }
    }
  }
  .setting-button {
    width: 100%;
    text-align: center;
    .el-button {
      width: 430px;
      height: 60px;
      text-align: center;
      font-size: 20px;
    }
  }
}
</style>
